<!-- 新闻、动态资讯 -->
<template>
	<view class="news_list">
		<view class="list_title">
			<view class="treetop"></view>
			<text>动态资讯/Company Updates</text>
			<view class="news_more">
				<view class="news_view" @click="more">
					<text>更多</text>
					<text class="iconfont icon-gengduozixun"></text>
				</view>

			</view>
		</view>
		<view class="list_ul">
			<view class="list_li" v-for="(exit,index) in listData" :key="index" @click="clickDetails(exit)">
				<view class="list_img">
					<view class="list_view">
						<image :src="exit.poster" mode="aspectFill"></image>
					</view>
				</view>
				<view class="list_name">
					<text class="ponent news_title">{{exit.title}}</text>
					<text class="ponent news_create">{{formatToDate(exit.create_date)}}</text>
					<text class="ponent news_text">{{removeHtmlTagsByDom(exit.content)}}</text>
					<!-- <text class="ponent news_text" v-text="exit.content"></text> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getDataList
	} from '../../utils/http_data.js';
	import {
		formatMillisecondsToDateTime
	} from '../../utils/common.js';
	export default {
		name: "news",
		data() {
			return {
				listData: [{
						id: 1,
						title: '工术光电年度盛会：表彰先进，共迎未来',
						time: '2025-04-27',
						text: '近日，工术光电公司举行了年度总结表彰大会，以“表彰先进、鼓舞士气、共迎未来”为主题。在本次年会上，公司领导和各部门优秀员工齐聚一堂，共同回顾过去一年的辉煌成就，并展望未来的发展方向。',
						url: '/static/newsImg01.jpg'
						// url: '/static/images/classification01.png'
					},
					{
						id: 2,
						title: '工术光电年会顺利召开：员工专注生产，企业展现新风貌',
						time: '2025-03-27',
						text: '近日，工术光电公司年会顺利召开。这次年会不仅是对过去一年辛勤工作的总结，更是对未来发展的展望。从图片中可以看到，员工们身穿蓝色工作服，正在现代化的生产车间内专注地操作各种高精度设备。工术光电公司一直致力于光电技术的研究和开发，在行业内享有很高的声誉。公司注重员工的培训和发展，不断提升员工的专业技能和安全意识。年会的召开不仅增强了员工的凝聚力和归属感，也为公司未来的发展注入了新的动力。通过这张图片，我们可以看到工术光电公司在现代化管理和技术创新方面的成就。相信在未来的发展中，工术光电将继续保持稳健的步伐，不断突破，成为行业的佼佼者。',
						url: '/static/newsImg02.jpg'
					},
					{
						id: 3,
						title: '‌工术光电年会：员工齐聚一堂 共庆辉煌时刻',
						time: '2025-01-27',
						text: '近日，工术光电公司举行了年度盛会，公司员工们齐聚一堂，共同回顾过去的成就并展望未来的发展。年会上，气氛热烈而温馨，员工们积极参与各项活动，并踊跃参与抽奖环节，桌上摆满了各种奖品和礼品，洋溢着喜庆的氛围。此次年会不仅是对过去一年公司取得的成绩进行总结，更是为了增强员工之间的凝聚力和团队合作精神。通过丰富多彩的节目和互动游戏，员工们不仅加深了彼此的了解和友谊，也对公司未来的发展充满了信心和期待。工术光电公司一直以来注重员工的成长和发展，通过举办这样的活动，不仅让员工们感受到了公司的关怀和温暖，也进一步激发了大家的工作热情和创造力。相信在新的一年里，工术光电公司将会在全体员工的共同努力下，取得更加辉煌的成就。',
						url: '/static/newsImg03.jpg'
						// url: '/static/images/classification03.png'
					},
					{
						id: 4,
						title: '‌"全息星河点亮湾区之夜"',
						time: '2024-12-27',
						text: '在工术光电年会庆典上，员工们以充满活力的集体舞拉开了序幕。年会现场充满了欢声笑语，气氛热烈而喜庆。这次年会不仅展示了工术光电团队的风采，也增强了员工之间的凝聚力。通过一系列精彩纷呈的表演和互动环节，员工们在忙碌的工作之余得以放松身心，加深了彼此之间的友谊。工术光电一直以来注重员工的全面发展，通过组织形式多样的活动来提升团队凝聚力和员工幸福感。此次年会再次证明了工术光电是一个充满活力、团结向上的大家庭。相信在新的一年里，工术光电将在全体员工的共同努力下，继续书写更加辉煌的篇章。',
						url: '/static/newsImg04.jpg'
						// url: '/static/images/classification04.png'
					}
				]
			};
		},
		mounted() {
			this.getDataListfun()
		},
		methods: {
			// 转换年月日时分秒
			formatToDate(val) {
				return formatMillisecondsToDateTime(val)
			},
			// 获取新闻数据
			getDataListfun(current, pageSize) {
				getDataList({
					pageSize: 4
				}).then((data) => {
					console.log('新闻：', data);
					this.listData = data.data;
				})
			},
			// 跳转到新闻详情页
			clickDetails(val) {
				this.detailsExit = val;
				uni.navigateTo({
					url: '/pages/dynamic-details/dynamic-details?_id=' + val._id
				});
			},
			// 跳转更多新闻
			more() {
				uni.redirectTo({
					url: '/pages/dynamic/dynamic'
				});
			},
			removeHtmlTagsByDom(htmlStr) {
				if (!htmlStr || typeof htmlStr !== 'string') {
					return '';
				}
				const tempDiv = document.createElement('div');
				tempDiv.innerHTML = htmlStr;
				let pureText = tempDiv.textContent || tempDiv.innerText;
				pureText = pureText.replace(/\n+/g, '\n').replace(/\s+/g, ' ').trim();
				return pureText;
			}
		}
	}
</script>

<style scoped>
	.news_list {
		width: 1360px;
		margin: 0 auto;
	}

	.list_title {
		width: 100%;
		height: 60px;
		line-height: 90px;
		display: flex;
		font-size: 16px;
		font-weight: 400;
	}

	.treetop {
		width: 5px;
		height: 15px;
		background-color: #D9001B;
		margin-top: 38px;
		margin-right: 6px;
	}

	.news_more {
		/* margin-left: 100px; */
		flex: 1;
		text-align: end;
		padding-right: 24px;
	}

	.news_view {
		width: 80px;
		float: right;
		cursor: pointer;
	}

	.news_view:hover {
		color: #D9001B;
	}

	.list_ul {
		width: 1360px;
		/* height: 640px; */
		/* background-color: aqua; */
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: auto;
		/* overflow: hidden; */
	}

	.list_li {
		width: 654px;
		/* width: calc(50% - 10px); */
		background-color: #F5F5F5;
		border-radius: 8px;
		height: 240px;
		margin: 20px 0;
		display: flex;
		cursor: pointer;
		/* align-items: center; */
		/* justify-content: center; */
	}

	/* .list_li:nth-child() {} */

	.list_img {
		width: 220px;
		height: 100%;
		margin: auto 0;
		display: flex;
		/* background-color: #D9001B; */
	}

	.list_view {
		width: 90%;
		height: 80%;
		margin: auto;
		box-sizing: border-box;
		border-radius: 6px;
		overflow: hidden;
	}

	.list_li image {
		width: 100%;
		height: 100%;
		border-radius: 6px;
		/* transform: scale(1); */
	}

	.list_li image:hover {
		/* transform:scale(1.2); */
		animation: pulse 1s forwards;
	}

	@keyframes pulse {
		0% {
			transform: scale(1);
		}

		50% {
			transform: scale(1.2);
		}

		100% {
			transform: scale(1);
		}
	}


	.list_name {
		width: 400px;
		/* height: 25%; */
		overflow: hidden;
	}

	.ponent {
		display: block;
		/* text-align: center; */
		font-size: 14px;
		font-weight: 400;
		padding-left: 20px;
	}

	.news_title {
		height: 28px;
		font-size: 15px;
		font-weight: 700;
		line-height: 28px;
		color: #333;
		padding-top: 50px;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		/* -webkit-line-clamp: 5; */
		overflow: hidden;
		text-overflow: ellipsis;
		text-align: justify;
	}

	.news_title:hover {
		color: #D9001B;
	}

	.line-h {
		line-height: 54px;
	}

	.news_create {
		color: #B499A5;
	}

	.news_time {
		font-size: 16px;
		font-weight: 400;
		line-height: 50px;
		color: #999;
	}

	.news_text {
		font-size: 14px;
		font-weight: 400;
		line-height: 25px;
		color: #666;
		padding-top: 16px;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 4;
		overflow: hidden;
		text-overflow: ellipsis;
		text-align: justify;
		/* text-indent: 2em; */
	}
</style>